<script src="../../../../../utils/request.js"></script>
<template>
  <div>
    <ele-pro-table
      @expand-change="expandChange"
      :row-key='getRowKeys'
      :expand-row-keys="expands"
      ref="table"
      size="mini"
      :columns="columns"
      :datasource="datasource"
      :need-page="true"
      :hideOnSinglePage="false"
    >
      <!--展开行-->
      <template v-slot:expand="{ row }">
        <el-table class="table-expand table-class" :data="tableData" style="z-index: 99;overflow-x: auto">
          <el-table-column  label="订单号" align="center" show-overflow-tooltip>
            <template slot-scope="scope">
              <div class="font-overflow">{{scope.row.businessOrderId}}</div>
            </template>
          </el-table-column>
          <!--产品付费类型 1:付费 2:试用 3：其他-->
          <el-table-column label="云存储状态" align="center">
            <template slot-scope="scope">
              <div class="font-overflow">{{scope.row.status==1 ? '待使用' : '使用中'}}</div>
            </template>
          </el-table-column>
          <el-table-column label="用户激活状态" align="center">
            <template slot-scope="scope">
              <div class="font-overflow">{{scope.row.userActiveStatus==1 ? '激活状态' : '暂停状态'}}</div>
            </template>
          </el-table-column>
          <el-table-column label="服务是否立即生效" align="center">
            <template slot-scope="scope">
              <div class="font-overflow">{{scope.row.effectImmediately==1 ? '立即生效' : '延迟生效'}}</div>
            </template>
          </el-table-column>
          <el-table-column label="生效时间" align="center">
            <template slot-scope="scope">
              <div class="font-overflow">{{$sun.timestampToTime(scope.row.effectTime)}}</div>
            </template>
          </el-table-column>
          <el-table-column label="过期时间" align="center">
            <template slot-scope="scope">
              <div class="font-overflow">{{$sun.timestampToTime(scope.row.expireTime)}}</div>
            </template>
          </el-table-column>
        </el-table>
      </template>
      <!--网络状态:1-在线 2-不在-->
      <template v-slot:network="{ row }">
        <div class="flex">
          <div :class="row.status==1 ?'staut-class':'leave'">{{row.status==1 ? '在线中' : '已离线'}}</div>
        </div>
      </template>
      <!--使用状态:1,空闲中 2,使用中 3.已到期 默认为1-->
      <template v-slot:useStauts="{ row }">
        <div :class="row.onState==1 ? 'blue' : row.onState==2 ? 'red' : 'grey'">
          {{row.onState==1 ? '空闲中' : row.onState==2 ? '使用中' : '已到期'}}
        </div>
      </template>
      <!--验证码 密码隐藏/展示 -->
      <template v-slot:code="{ row }">
        <div class="width100 flex">
          <el-input
            class="input-class flex1" readonly :type="row.isVisble ? 'text' : 'password'" v-model="row.validateCode">
          </el-input>
          <img src="@/assets/passwordEye.png" style="width: 18px;height: 18px" @click="isVisbleClick(row)" />
        </div>
      </template>
    </ele-pro-table>
  </div>
</template>

<script>
  import {queryMerchantList} from "@/api/lncomingManagement/cameraManage";
  import {queryCameraList, queryDeviceInfo} from "@/api/lncomingManagement/carmeraAgent";
  export default {
    name: "table-list",
    props: {
      form:Object
    },
    data() {
      return {
        expands:[],
        getRowKeys (row) {
          return row.id
        },
        // 展开行 数据
        tableData:[],
        columns: [
          {
            width: 100,
            type: 'expand',
            columnKey: 'expand',
            align: 'center',
            fixed: 'left',
            label:'套餐列表',
            slot: 'expand'
          },
          {
            columnKey: 'index',
            type: 'index',
            width: 100,
            lable: 'sortValues',
            align: 'center',
            fixed: 'left',
            label: '排序'
          },
          {
            prop: 'displayName',
            label: '镜头名称',
            align: 'center',
            showOverflowTooltip: true,
          },
          {
            prop: 'status',  //  1-在线 2-不在
            label: '网络状态',
            align: 'center',
            showOverflowTooltip: true,
            slot: 'network',
          },
          {
            prop: 'deviceSerial',
            label: '序列号',
            align: 'center',
            showOverflowTooltip: true,
          },
          {
            prop: 'onState',  // 1,空闲中 2使用中 3.已到期 默认为1
            label: '使用状态',
            align: 'center',
            showOverflowTooltip: true,
            slot: 'useStauts',
          },
          {
            prop: 'validateCode',
            label: '验证码',
            align: 'center',
            showOverflowTooltip: true,
            slot: 'code',
          },
          {
            prop: 'createTime',
            label: '创建时间',
            align: 'center',
            showOverflowTooltip: true,
          },
        ],
      };
    },
    methods: {
      // 折叠面板每次只能展开一行
      expandChange(row, expandedRows){
        var that = this
        if (expandedRows.length) {
          that.expands = []
          if (row) {
            that.expands.push(row.id)
            console.log("111111111",row)
            this.query(row)
          }
        } else {
          that.expands = []
        }
      },

      // 查询套餐列表
      query(row){
        queryDeviceInfo({
          deviceSerial:row.deviceSerial,
        })
          .then((data) => {
            this.tableData = data.data[0].cloudStorageServiceRespList ? data.data[0].cloudStorageServiceRespList : [];
          })
          .catch((e) => {
            this.$message.error(e);
          });
      },

      // 密码展示与隐藏
      isVisbleClick(row){
        // this.isVisble = this.isVisble==true ? false :true
        row.isVisble = row.isVisble != true
      },

      /* 如果想在数据源里面获取到接口返回的数据, 增加 async 和 await */
      async datasource({ page, limit, where, order }) {
        const result = await queryMerchantList({ ...where, ...order, page, limit,
          ...this.form,
          merchantId: this.$store.state.user.info.merchantId // 商户id
        });
        let arr = result.list
        for(let i = 0; i < arr.length; i++){
          arr[i].isVisble = false
        };
        return result.list;  // 这里返回的数据要包含 list 和 count 两个字段，字段名称可以通过 response 属性配置
      },
      /* 表格数据源 */
      /*datasource({ page, limit, where, order }) {
        return queryMerchantList({ ...where, ...order, page, limit,
          ...this.form,
          merchantId: this.$store.state.user.info.merchantId // 商户id
        });
      },*/
      /* 刷新表格 */
      reload(where) {
        this.$refs.table.reload({ page: 1, where: where });
      },
    },
    watch: {

    }
  };
</script>

<style scoped lang="less">

  .input-css input[disabled] //disadled:后台不可接收此input传值
  {
    background:#dddddd; //为带有disabled的input框添加背景颜色
    pointer-events:none;//鼠标点击不可修改
  }
  .staut-class{
    padding: 2px;
    width: 50px;
    color: #31A952;
    background-color: #E4FFEC;
  }
  .leave{
    color: #999999;
    padding: 2px;
    width: 50px;
    background-color: #FFF5F4;
  }
</style>
